<script setup lang="ts">
import { getInfraredMissionDetailApi } from '@/api/infrared'
// props
const props = defineProps({
  deviceData: {
    type: Object,
    default: null
  },
  showVideo: {
    type: Function,
    default: null
  },
  showItemVideo: {
    type: Function,
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    default: () => {}
  }
})

// 定义方法
const handleClick = async (row:any) => {
  let data = {
    Id: row.id
  }
  let res = await getInfraredMissionDetailApi(data)
  props.showItemVideo()
  props.showVideo(res.result)
}
</script>

<template>
  <div class="device-table-box">
    <el-table
      class="device-table"
      :data="deviceData"
      :header-cell-style="{background: '#f7f8faFF',color:'#6B7785FF'}"
      highlight-current-row="true"
      style="width: 100%"
      height="320"
      @row-click="handleClick"
    >
      <el-table-column
        type="index"
        label="序号"
        align="center"  
        width="60px"
      />
      
      <!-- <el-table-column
        align="center"  
        prop="name"
        label="设备"
        width="180"
      />
      <el-table-column
        align="center"  
        prop="position"
        label="位置"
      /> -->
      <el-table-column
        align="center"  
        prop="creationTime"
        label="时间"
      />
      <el-table-column
        align="center"  
        prop="address"
        label="巡检记录"
      >
        <template #default>
          链接
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss">
.device-table {
  .el-table__header-wrapper {
    background: #E5E6EBFF;
  }
}
.device-table-box {
  border-right: 1px solid #e5e6eb;
  border-left: 1px solid #e5e6eb;
}
</style>